<template>
  <div class="page">
    <van-nav-bar
      title="我的个人信息"
    />

    <!-- <div v-if="fileUrl" class="image">
      <van-uploader :after-read="afterRead">
        <van-image :src="fileUrl" round width="100" height="100" fit="cover" />
      </van-uploader>
    </div>

    <div v-else class="image">
      <van-uploader :after-read="afterRead" max-count:1 @click="afterRead" />
    </div> -->


    <h1>{{ name }}</h1>

    <div class="actionDiv topActionDiv" @click="showEdit">
      <span class="divTest">修改密码</span>
      <i class="divIcon van-icon van-icon-arrow van-cell__right-icon" />
    </div>
    <!-- <div class="actionDiv">
      <span class="divTest">中间</span>
      <i class="divIcon van-icon van-icon-arrow van-cell__right-icon" />
    </div>
    <div class="actionDiv">
      <span class="divTest">中间</span>
      <i class="divIcon van-icon van-icon-arrow van-cell__right-icon" />
    </div> -->
    <div class="actionDiv bottomActionDiv" @click="showNameEdit">
      <span class="divTest">修改用户名</span>
      <i class="divIcon van-icon van-icon-arrow van-cell__right-icon" />
    </div>

    <van-button class="btn" type="danger" round @click="logout">退出登录</van-button>

    <van-tabbar v-model="active" @change="onChange">
      <van-tabbar-item name="home" icon="home-o">主页</van-tabbar-item>
      <van-tabbar-item name="my" icon="friends-o">我的</van-tabbar-item>
    </van-tabbar>

    <van-dialog
      v-model="show"
      title="修改密码"
      show-cancel-button
      :before-close="beforeClose"
      @confirm="editPassword"
      @cancel="clearPassword"
    >
      <van-cell-group>
        <van-field v-model="editPasswordData.oldPassword" label="旧密码" placeholder="请输入旧密码" />
        <van-field v-model="editPasswordData.newPassword" label="新密码" placeholder="请输入新密码" />
        <van-field v-model="editPasswordData.confirnPassword" label="确认密码" placeholder="请输入确认新密码" />
      </van-cell-group>
    </van-dialog>

    <van-dialog
      v-model="showName"
      title="修改密码"
      show-cancel-button
      :before-close="beforeClose"
      @confirm="editName"
      @cancel="clearName"
    >
      <van-cell-group>
        <van-field v-model="editUserInfo.userName" label="用户名" placeholder="请输入用户名" />
      </van-cell-group>
    </van-dialog>

  </div>
</template>

<script>

import { logout, modifyPassword, modifyUserInfo } from '../../api/user.js'
import { upload } from '../../api/file.js'
import { Toast } from 'vant'
export default {
  name: 'MyIndex',
  data: function() {
    return {
      msg: '主页',
      active: 'my',
      name: '',
      userId: null,
      show: false,
      showName: false,
      editPasswordData: {
        oldPassword: '',
        confirnPassword: '',
        newPassword: ''
      },
      editUserInfo: {
        userName: ''
      },
      fileUrl: undefined
    }
  },
  mounted() {
    this.getUserInfo()
    console.log('我的页面渲染完成')
  },
  methods: {
    onChange(index) {
      console.log(index)
      this.$router.push({ path: '/home/index' })
    },
    async getUserInfo() {
      await this.$store.dispatch('user/getUserInfoByToken')
      const user = this.$store.state.user.user
      console.log('11', user)
      this.fileUrl = user.userAva
      this.name = user.userName
      this.userId = user.id
      // // 请求接口
      // getUserInfo({}).then((res) => {
      //   console.log(res)
      //   const user = this.$store.state.user
      //   console.log(user)
      //   this.fileUrl = user.userAva
      //   this.name = user.userName
      //   this.userId = user.id
      // })
    },
    logout() {
      console.log('退出登录')
      // 使用异步请求
      logout().then(() => {
        Toast('退出成功')
        localStorage.removeItem('token')
        this.$store.state.user.clear
        this.$router.push('/login')
      })
    },
    showEdit() {
      this.show = true
    },
    showNameEdit() {
      this.showName = true
      this.editUserInfo.userName = this.name
    },
    editPassword() {
      console.log(this.editPasswordData)
      const op = this.editPasswordData.oldPassword
      const np = this.editPasswordData.newPassword
      const cp = this.editPasswordData.confirnPassword

      const params = {
        userId: this.userId,
        newPassword: np,
        password: op
      }
      if (op === undefined || op.length <= 0) {
        Toast('请输入原密码')
      } else
      if (np === undefined || np.length <= 0) {
        Toast('请输入新密码')
      } else
      if (cp === undefined || cp.length <= 0) {
        Toast('请输入确认密码')
      } else {
        console.log(params)
        if (np === cp) {
        // 请求接口
          modifyPassword(params).then((res) => {
            console.log(res)
            Toast('修改密码成功')
            // 最后清空密码
            this.clearPassword()
          })
        } else {
          Toast('两次输入的密码不一致')
        }
      }
    },
    clearPassword() {
      this.editPasswordData = {}
      this.show = false
    },
    editName() {
      console.log('修改名称')
      const params = {
        id: this.userId,
        userName: this.editUserInfo.userName
      }
      // 请求接口
      modifyUserInfo(params).then((res) => {
        console.log(res)
        Toast('修改用户名成功')
        // 最后清空密码
        this.clearName()
        this.getUserInfo()
      })
    },
    clearName() {
      this.editUserInfo = {}
      this.showName = false
    },
    beforeClose(action, done) {
      done(false)
    },
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      upload(file).then(res => {
        this.fileUrl = res.data.data
        console.log(this.fileUrl)
        // 在这里调用保存头像接口
        const params = {
          ava: this.fileUrl
        }
        modifyUserInfo(params).then((res) => {
          Toast(res.msg)
        })
      }).catch(message => {
        console.log('拒绝')
        Toast(message)
      })
    }
  }
}

</script>

<style scoped>
.image {
  margin-top: 20px;
}
.input {
  margin-right: 20px;
  margin-left: 20px;
}
.inputFont {
  font-size: large;
}
.actionDiv {
  display: flex;
  padding: 10px;
  padding-left: 20px;
  height: 40px;
  margin-right: 20px;
  margin-left: 20px;
  background-color: white;
}
.actionDiv:active {
  background-color: rgb(229, 229, 229);
}
.actionDiv:focus {
  background-color: rgb(229, 229, 229);
}
.divIcon {
  line-height: 40px;
  float: right;
}
.divTest {
  line-height: 40px;
  font-size: large;
  width: 90%;
}
.page {
  background-color: rgb(238, 233, 233);
  height: 800px;
}
.topActionDiv {
  margin-top: 30px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.bottomActionDiv {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  margin-bottom: 30px;
}
.btn {
  width: 80%;
}
</style>
